<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息统计</title>\

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/china.js"></script>
</head>
<body>
<div id="sex" style="width: 600px;height:400px;"></div>
<div id="week" style="width: 600px;height:400px;"></div>
<div id="province" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var sex = echarts.init(document.getElementById('sex'));
    var week= echarts.init(document.getElementById('week'));
    var province = echarts.init(document.getElementById('province'));
    $(function () {
        $.ajax({
            "url":"${pageContext.request.contextPath}/user/showAllCount",
            "success":function (r) {
                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '男女人数对比'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        data:['数量']
                    },
                    xAxis: {
                        data: r.sex.name
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: r.sex.value
                    }]
                };
                var option2 = {
                    title: {
                        text: '近三周访问量'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        data:['人数']
                    },
                    xAxis: {
                        data: ['0-7','7-14','14-21']
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'line',
                        data: r.week.value
                    }]
                };
                var option3 = {
                    title : {
                        text: '用户地区分布',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['用户人数']
                    },
                    visualMap: {
                        min: 0,
                        max: 20000,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],           // 文本，默认为数值文本
                        calculable : true
                    },
                    toolbox: {
                        show: true,
                        orient : 'vertical',
                        left: 'right',
                        top: 'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    series : [
                        {
                            name: '用户人数',
                            type: 'map',
                            mapType: 'china',
                            data:r.province
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                sex.setOption(option1);
                week.setOption(option2);
                province.setOption(option3);
            }
        })

    })

</script>
</body>
</html>